import AudDialog, { AudDialogShowParams } from '@/pages/components/Aud/AudDialog';
import { Button, DataGrid, Form } from 'devextreme-react';
import { Column } from 'devextreme-react/data-grid';
import { SimpleItem } from 'devextreme-react/form';
import React, { useCallback, useImperativeHandle, useRef } from 'react';
import { useState } from 'react';


const AddUnderProject: React.FC<any> = React.forwardRef((props: any, ref) => {
    const [visible, setVisible] = useState<boolean>(false);
    const diaParams = useRef<AudDialogShowParams>();

    const AddUnderProjectRef = useRef<any>()


    // 自定义方法
    useImperativeHandle(ref, () => ({
        show: async (params: AudDialogShowParams) => {
            diaParams.current = params;
            setVisible(true);
        },
        close: () => { setVisible(false) }
    }));

    const Ok = useCallback(() => {
        setVisible(false)
    }, [])

    return (
        <>
            <AudDialog
                ref={ref}
                visible={visible}
                title={diaParams.current?.args?.title}
                width={700}
                height={500}
                {...props}
                showCancelButton={true}
                showOkButton={true}
                onOK={Ok}
                onCancel={() => {
                    setVisible(false)
                }}
                onHiding={() => setVisible(false)}
            >
                <Form
                    width={300}
                    ref={AddUnderProjectRef}
                    onFieldDataChanged={(e) => {
                        console.log(e, 'e----');
                    }}
                >
                    <SimpleItem
                        editorType="dxSelectBox"
                        label={{ text: '编辑人' }}
                        editorOptions={{
                            dataSource: [
                                { Name: '111', ID: 0 },
                                { Name: '222', ID: 1 },
                            ],
                            displayExpr: 'Name',
                            valueExpr: 'ID',
                            searchEnabled: true,
                        }}
                    />
                    <SimpleItem
                        dataField="xmqjs"
                        label={{ text: '编辑日期' }}
                        editorType="dxDateBox"
                    />
                    <SimpleItem
                        editorType="dxSelectBox"
                        label={{ text: '复核人' }}
                        editorOptions={{
                            dataSource: [
                                { Name: '111', ID: 0 },
                                { Name: '222', ID: 1 },
                            ],
                            displayExpr: 'Name',
                            valueExpr: 'ID',
                            searchEnabled: true,

                        }}
                    />
                    <SimpleItem
                        dataField="xmqjs"
                        label={{ text: '复核时间' }}
                        editorType="dxDateBox"
                    />
                </Form>
            </AudDialog>

        </>
    );
});

export default AddUnderProject